Cassie

Jumping in to say that (luckily) it actually is pretty easy - it's all down to the SVG filter! https://css-tricks.com/gooey-effect/ Warning that this effect is quite bad for performance, so keep it for quick small interactions like buttons, don't try and 'goo-ify' lots of things/large elements/or animate infinitely using this filter. Quick and small! <filter id="alienGoo"> <fegaussianblur in="SourceGraphic" stdDeviation="24" result="blur" /> <fecolormatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 28 -8" result="goo" /> <feblend in="SourceGraphic" in2="goo" /> </filter> <filter id="gooDrip"> <fegaussianblur in="SourceGraphic" stdDeviation="10" result="blur" /> <fecolormatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 24 -7" result="goo" /> <feblend in="SourceGraphic" in2="goo" /> </filter> <clippath id="theClipPath"> <rect x="325" y="500" width="350" rx="8" ry="8" height="180"/> </clippath> <filter id="glow" x="-50%" y="-50%" width="200%" height="200%"> <fegaussianblur id="glowBlur" stdDeviation="14" result="blur"/> <femerge> <femergenode in="blur"/> <femergenode in="SourceGraphic"/> </femerge> </filter>

Heya! From the ScrollSmoother docs https://gsap.com/docs/v3/Plugins/ScrollSmoother/#speed-parallax https://gsap.com/docs/v3/Plugins/ScrollSmoother/#lag-the-delightful-kind

Ah ok, this sounds a lot like big chunks of third party code fighting with each other. That's usually the difficulty with dropping in different libraries that handle interaction and listen/react to scroll/wheel events. Pretty tricky for us to debug too I'm afraid. Sorry, it sounds frustrating.

Ah yeah, that's because I just installed yarn berry for that particular project. That would change depending on the users setup I'm feeling *tentatively* good about this then.... I'll update the docs (and wait for the new edge cases to start flooding in 🫠) unsafeHttpWhitelist: - "npm.greensock.com" npmScopes: gsap: npmRegistryServer: "https://npm.greensock.com" npmAuthToken: <YOUR TOKEN>

super helpful thanks @ynamite

Thanks for the info! I updated my project settings to yarn berry for testing and managed to get a build working with the following. YARN BERRY - v4.2.2 yarnrc.yml yarnPath: .yarn/releases/yarn-4.2.2.cjs unsafeHttpWhitelist: - "npm.greensock.com" npmScopes: gsap: npmRegistryServer: "https://npm.greensock.com" npmAuthToken: <YOUR TOKEN> install command yarn add @gsap/business Yarn Classic With previous versions of Yarn everything seems to be working with .npmrc and the more explicit install command on the install page .npmrc (not sure why .yarnrc isn't working) always-auth=true //npm.greensock.com/:_authToken=<YOUR TOKEN> @gsap:registry=https://npm.greensock.com/ install command yarn add gsap@npm:@gsap/business @Prasanna - do these look like decent recommendations? I'm going to add a Yarn Classic vs Yarn Berry tab on the install page if so.

Hi there, I'm sorry, but the audio is incredibly bad on that video. Please can you provide a clear explanation of the issue and a link to a minimal demo showing the code that is causing the problem. We can't debug live websites I'm afraid as we don't have a clear view of the code and there are too many moving parts to effectively narrow down the issue

If you're using React 18 and above, React made some changes to how they handle rendering https://react.dev/reference/react/StrictMode Your components will re-render an extra time to find bugs caused by impure rendering. Your components will re-run Effects an extra time to find bugs caused by missing Effect cleanup. This re-rendering pattern made animation cleanup much more important for React devs so we created a hook to help. This isn't us trying to make things more complicated, this is us extending a helping hand due to decision outside of our control from another library. Hope this helps to clarify a little

Hi folks! I recently updated the installation guide so I'm just trying to nail down what the issue is here as the install instructions were working. I'm sorry about how frustrating this is. We also find it incredibly frustrating, we don't have control over Yarn issues. I would love to find one solution that works for everyone but there always seem to be edge cases popping up. The React package won't be included in the yarn install instructions unless you explicitly ask for it as plenty of yarn users aren't using React. You can select it on the GSAP install page if it's relevant to you though. The useGSAP package was a recent addition to help users with animation cleanup. There's a section covering it in our docs here. https://gsap.com/resources/React/ I assume Rodrigo was just demonstrating an install. He wasn't advising to use shockingly instead. You should use business as that's your tier. I can see why this was confusing though, sorry about that. Installation I ran through the install using the instructions on the install page and your install token @stectix - you're correct that it doesn't work with a .yarnrc file, however it does work with an .npmrc file and the business package. Here's my install yarn-install.mp4 The thing that confuses me is that Yarn advises to use a .yarnrc - so that should work. Tagging in @Prasanna as the resident expert, as I'd really love to figure out why? Is it safe for us to advise Yarn users to use an .npmrc? Why is the yarnrc not working now? I'm afraid we don't have any control over how Yarn handles private registries or package name aliases. It is incredibly frustrating though, we're with you on that. This is why we suggest npm or the .zip download if you're struggling, those are solutions that work seamlessly. We understand that not everyone can just switch over though. I'll do what I can to try and make this easier, I wish there was a 'one size fits all' solution, but it seems like whatever we suggest, Yarn is throwing curveballs out. We can maybe start by suggesting that people use an .npmrc file if @Prasanna doesn't see an issue with that? Apologies again, I'm honestly just as frustrated as you all with this endless Yarn saga.

Here you go! This one should get you started https://codepen.io/GreenSock/pen/oNjgEjm?editors=1100